<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湖北省节能标准信息服务平台——首页</title>
    <link rel="stylesheet" href="${ctx}/static/styles/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/bootstrap-theme.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/common.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/index.css" type="text/css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="index-top">
    <div class="index-header">
        <div class="container">
            <div class="index-logo">
                <img src="${ctx}/static/images/logo3.png">
            </div>
            <shiro:hasRole name="user">
                <div class="dropdown pull-right index-username">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                            data-toggle="dropdown">
                        <shiro:principal
                                property="name"/>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                                                   href="${ctx}/profile">修改个人信息</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="${ctx}/logout">注销用户</a>
                        </li>
                    </ul>
                </div>
            </shiro:hasRole>
            <shiro:hasRole name="admin">
                <div class="dropdown pull-right index-username">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu12"
                            data-toggle="dropdown">
                        <shiro:principal
                                property="name"/>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="${ctx}/admin/index">后台管理</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1"
                                                   href="${ctx}/profile">修改个人信息</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="${ctx}/logout">注销用户</a>
                    </ul>
                </div>
            </shiro:hasRole>
            <div class="index-menu">
                <ul>
                    <li class="first-item index-item"><a href="${ctx}/index">首页</a></li>
                    <li class="index-item"><a href="${ctx}/index/search">检索</a></li>
                    <li class="index-item"><a href="${ctx}/std/list">标准</a></li>
                    <li class="index-item"><a href="${ctx}/news/list">资讯</a></li>
                    <li class="index-item"><a href="${ctx}/infor/index">咨询</a></li>
                    <shiro:guest>
                        <li class="index-item last-item"><a href="${ctx}/login" class="index-login">登录/注册</a></li>
                    </shiro:guest>
                </ul>
            </div>

        </div>
    </div>
    <div class="container">
        <div class="col-lg-5 col-md-5 col-sm-5 fadeInLeft">
            <div class="index-info">
                <h2>节能标准发现、节能指标查询</h2>
                <p>最权威的标准&nbsp;&nbsp;&nbsp;最快捷的查询</p>
                <form class="general-search-form" action="${ctx}/std/search" method="get">
                    <div class="input-group input-group-lg index-search">
                        <input class="form-control user-search" type="text" name="keyword" placeholder="快速搜索">
                        <span class="input-group-btn">
                            <button class="btn" type="submit">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-lg-7 col-md-7 col-sm-7">
            <div class="index-bg">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="${ctx}/static/images/bg2.jpg" alt="大图1">
                        </div>
                        <div class="item">
                            <img src="${ctx}/static/images/bg3.jpg" alt="大图2">
                        </div>
                        <div class="item">
                            <img src="${ctx}/static/images/bg4.jpg" alt="大图3">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container row" id="index-function-section">
    <div class="col-sm-5 index-section-img">
        <img src="${ctx}/static/images/section1.png">
    </div>
    <div class="col-sm-7">
        <div class="index-section-header">
            <p class="index-section-title">
                功 能
            </p>
            <span class="index-section-subtitle">FUNCTION</span>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 index-function">
                <i class="index-icon index-icon-search"></i>
                <h4><a href="${ctx}/std/seniorSearch">综合搜索</a></h4>
                <p>最快速的搜索方式，帮您获取权威标准</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 index-function">
                <i class="index-icon index-icon-compare"></i>
                <h4><a href="${ctx}/quota/search">指标比对</a></h4>
                <p>最合理的比对方法，帮您探索指标关联</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 index-function">
                <i class="index-icon index-icon-analysis"></i>
                <h4><a href="#">指标分析</a></h4>
                <p>最合理的比对方法，帮您挖掘深度信息</p>
            </div>
        </div>
    </div>

</div>
<div id="index-news-section">
    <div class="container row">
        <div class="col-lg-7 col-md-7 col-sm-7">
            <h4>最新资讯<a href="${ctx}/news/list">更多</a></h4>
            <div class="index-news-list">
                <ul>
                    <c:forEach items="${news}" var="item">
                        <li class="clearfix">
                            <p><fmt:formatDate value="${item.publishDate}" type="date" dateStyle="long"/></p>
                            <a href="${ctx}/news/detail/${item.id}"> ${item.title}</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="col-lg-5 col-md-5 col-sm-5">
            <div class="index-section-img">
                <img src="${ctx}/static/images/section2.png">
            </div>
            <div class="index-section-header">
                <p class="index-section-title">
                    资 讯
                </p>
                <span class="index-section-subtitle">NEWS</span>
            </div>
        </div>
    </div>
</div>
<div class="container" id="index-link-section">
    <div class="index-section-header">
        <p class="index-section-title">
            互 动
        </p>
        <span class="index-section-subtitle">INTERACTION</span>
    </div>
    <div class="row index-link">
        <div class="col-sm-3">
            <a href="${ctx}/infor/list/1">
                <img src="${ctx}/static/images/link1.png">
                <p>标准需求</p>
            </a>
        </div>
        <div class="col-sm-3">
            <a href="${ctx}/infor/list/2">
                <img src="${ctx}/static/images/link2.png">
                <p>标准咨询</p></a>
        </div>
        <div class="col-sm-3">
            <a href="${ctx}/infor/list/3">
                <img src="${ctx}/static/images/link3.png">
                <p>建议</p></a>
        </div>
        <div class="col-sm-3">
            <a href="${ctx}/infor/list/4">
                <img src="${ctx}/static/images/link4.png">
                <p>网上调查</p></a>
        </div>
    </div>
</div>
<div class="index-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8">
                <p>已浏览 <span>2386</span> 次&nbsp;&nbsp;&nbsp;地址：湖北省武汉市武昌区公平路6号</p>
                <p>联系电话：027-88214426&nbsp;&nbsp;&nbsp;邮箱：493661292@qq.com</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4">
                <p>&copy;2016 湖北省标准化与质量研究院</p>
                <p>隐私声明和cookies | 使用条款 | 帮助</p>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="${ctx}/static/js/bootstrap.min.js" type="text/javascript"></script>
<script>
    $('.carousel').carousel();

    $(".index-menu ul li").click(function () {
        $index = $(this).index();
        switch ($index) {
            case 0:
                break;
            case 1:
                $('html,body').animate({
                    scrollTop: $("#index-function-section").offset().top
                }, 1000);
                break;
            case 2:
                $('html,body').animate({
                    scrollTop: $("#index-news-section").offset().top
                }, 1000);
                break;
            case 3:
                $('html,body').animate({
                    scrollTop: $("#index-link-section").offset().top
                }, 1000);
                break;
        }
    })
</script>
</body>
</html>